<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!--引入vue-->
    <script src="../js/vue.js"></script>
    <!--引入Element-->
    <script src="../js/index.js"></script>
    <link rel="stylesheet" href="../css/index.css">

    <script src="../js/axios.min.js"></script>
    <script src="../js/request.js"></script>
    <style>
        .app-container {
            background-color: #fff;
            width: auto;
            height: 900px;
            padding-top: 100px;
        }

        .box-card {
            width: 1000px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="app-container">
        <el-card class="box-card">
            <el-tabs type="border-card">
                <el-tab-pane label="图书管理系统">
                    <div v-if="isRole()">
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-tabs type="card">
                                    <el-tab-pane label="图书管理">
                                        管理员 - 图书管理
                                        <h3>图书管理</h3>
                                        <div class="tab-pane active">
                                            添加图书：书名、作者、出版社、ISBM、简介、价格、出版日期、分类、数量<br>
                                            查询图书：根据书名或分类查询<br>
                                            删除图书：点击删除按钮即可<br>
                                            修改图书：点击修改按钮即进入修改界面
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="用户管理">
                                        管理员 - 用户管理
                                        <h1>用户管理</h1>
                                        <div class="tab-pane">
                                            添加用户：根据角色添加用户或者管理员<br>
                                            用户管理：对存在的用户或管理员进行删除，修改，查询
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="借还管理">
                                        管理员 - 借还管理
                                        <h1>借还管理</h1>
                                        <div class="tab-pane">
                                            用户借还书自动添加信息，如果超过指定日期，会显示催还按钮
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="修改密码">
                                        管理员 - 修改密码
                                        <h1>修改密码</h1>
                                        <div class="tab-pane">
                                            对自己的登录密码进行修改，修改成功后退出系统到login页面
                                        </div>
                                    </el-tab-pane>
                                </el-tabs>
                            </el-col>
                        </el-row>
                    </div>
                    <div v-else>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-tabs type="card">
                                    <el-tab-pane label="图书查询">
                                        读者 - 图书查询
                                        <h1>图书查询</h1>
                                        <div class="tab-pane active" id="pan5">
                                            根据书名或者分类进行查询
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="个人信息">
                                        读者 - 个人信息
                                    </el-tab-pane>
                                    <el-tab-pane label="我的借还">
                                        读者 - 我的借还
                                    </el-tab-pane>
                                    <el-tab-pane label="图书挂失">
                                        读者 - 图书挂失
                                    </el-tab-pane>
                                    <el-tab-pane label="修改密码">
                                        读者 - 修改密码
                                    </el-tab-pane>
                                </el-tabs>
                            </el-col>
                        </el-row>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {};
        },
        methods: {
            isRole() {
                const flag = localStorage.getItem('user');
                // 确保 flag 不为 null 或 undefined
                if (flag !== null && flag !== undefined) {
                    // 使用严格相等运算符比较字符串 '0'
                    return flag === '0';
                }
                return false; // 或者根据实际情况返回默认值
            }

        }
    });
</script>
</body>
</html>